<template>
	<u-overlay :show="show" @click="closeComp">
		<image :src="posterRef" class="poster" mode="widthFix" @click.stop="" show-menu-by-longpress></image>

		<view class="share-box flex flex-col items-center" v-if="!posterRef">
			<view class="share-top" ref="screenshotRef">
				<view class="flex items-center justify-center" style="width: 100%">
					<image :src="props.product.icon" class="icon"></image>
				</view>
				<view class="share-fill flex items-center justify-between">
					<view class="left flex-1">
						<view class="price rmb">{{ props.product.price }}</view>
						<view class="title">{{ props.product.title }}</view>
					</view>
					<image :src="props.wxConfig.qrCode" class="qrcode" crossorigin="anonymous"></image>
				</view>
				<view class="share-clerk">
					<view class="val">
						{{ props.product.share_content }}
					</view>
				</view>
			</view>
			<!-- <view class="edit flex items-center justify-end" @click="editShareContent">
				<up-icon name="edit-pen" color="#0896F0"></up-icon>
				<text>编辑</text>
			</view>
			 -->
		</view>

		<view class="share-btns" @click.stop="">
			<view class="grid">
				<button type="default" :open-type="item.type" class="item flex flex-col items-center" v-for="(item, index) in btns" :key="index" @click="onShare(item.handle)">
					<image :src="item.icon" class="icon"></image>
					<view class="name">{{ item.name }}</view>
				</button>
			</view>
			<view class="cancel" @click="closeComp">取消</view>
		</view>
	</u-overlay>
</template>

<script setup>
	import { defineProps, defineEmits, ref, watch, nextTick } from 'vue';
	import { port, goUrl, hint, imgUrl, goBack, loading, closeLoading } from '/service/port.js';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	// #ifdef H5
	import html2canvas from 'html2canvas'; // H5 端使用
	//  #endif
	const btns = [
		{ icon: '/packageA/static/product/ic_hyouwxqun.png', name: '微信好友', type: 'share' },
		{ icon: '/packageA/static/product/ic_pyouq.png', name: '微信朋友圈' },
		{
			icon: '/packageA/static/product/ic_xzaitup.png',
			name: '保存图片',
			handle: () => {
				// #ifdef MP-WEIXIN
				uni.saveImageToPhotosAlbum({
					filePath: posterRef.value,
					success: () => {
						hint('保存成功');
					},
					fail: () => {
						hint('保存失败');
					}
				});
				//  #endif
				// #ifdef H5
				hint('请长按保存');
				//  #endif
			}
		},
		{
			icon: '/packageA/static/product/ic_fuzljie.png',
			name: '复制链接',
			handle: () => {
				// #ifdef H5
				uni.setClipboardData({
					data: props.wxConfig.link,
					success: function () {
						hint('已复制链接');
					}
				});
				//  #endif

				// #ifdef MP-WEIXIN
				hint('小程序正式上线后可复制链接');
				//  #endif
			}
		}
	];
	const source = ref('');
	const screenshotRef = ref(null);


	onShow(() => {
		// #ifdef MP-WEIXIN
		source.value = 'mp-weixin';
		// #endif
		// #ifdef H5
		source.value = 'h5';
		// #endif
	});

	// #ifdef H5
	const capture = async () => {
		setTimeout(async () => {
			const element = screenshotRef.value?.$el || screenshotRef.value;

			if (!element) return;

			const canvas = await html2canvas(element, {
				useCORS: true, // 允许跨域图片
				backgroundColor: null // 透明背景
			});

			// 将 toBlob 包裹在 Promise 中
			const blob = await new Promise((resolve) => canvas.toBlob(resolve));

			// 生成对象 URL
			const url = URL.createObjectURL(blob);
			posterRef.value = url;
		}, 200);
	};
	defineExpose({ capture });
	// #endif

	const props = defineProps({
		show: Boolean,
		poster: String,
		wxConfig: Object,
		product: Object
	});
	const posterRef = ref('');

	const emits = defineEmits(['update:show']);

	function closeComp() {
		emits('update:show', false);
	}

	function onShare(handle) {
		if (typeof handle === 'function') {
			handle();
		}
	}


	watch(
		() => props.poster,
		(val) => {
			// #ifdef MP-WEIXIN
			uni.getFileSystemManager().saveFile({
				tempFilePath: val,
				success: (e) => {
					posterRef.value = e.savedFilePath;
				},
				complete: (e) => {
					console.log(e);
				}
			});
			//  #endif

			// #ifdef H5
			posterRef.value = val;
			//  #endif
		},
		() => props.wxConfig
	);
</script>

<style scoped lang="scss">
	.share-box {
		position: absolute;
		left: 50%;
		bottom: 350rpx;
		transform: translateX(-50%);
		border-radius: 20rpx;
		.share-top {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
			width: 528rpx;
			.icon {
				width: 528rpx;
				height: 528rpx;
				border-radius: 20rpx;
			}
			.share-fill {
				padding: 20rpx 0 28rpx 0;
				border-bottom: 1rpx dashed #eee;
				.left {
					.price {
						font-weight: 500;
						font-size: 38rpx;
						color: #fb3204;
					}
					.title {
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
						margin-top: 15rpx;
					}
				}
				.qrcode {
					width: 180rpx;
					height: 180rpx;
				}
			}
			.share-clerk {
				margin-top: 26rpx;
				.val {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					width: 80%;
				}
			}
		}
		.edit {
			position: absolute;
			bottom: 425rpx;
			right: 130rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #0896f0;
			margin-top: 20rpx;
			text-align: right;
			> text {
				margin-left: 5rpx;
			}
		}
		.share-bom {
			width: 100%;
			margin-top: 46rpx;
			background: #ffffff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				padding-top: 32rpx;
				text-align: center;
			}
			.types {
				padding: 32rpx 0;
				.icon-im {
					width: 100rpx;
					height: 100rpx;
				}
				.grid-text {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
				}
			}

			.clear-btn {
				font-weight: 400;
				font-size: 28rpx;
				color: #777777;
				text-align: center;
				padding: 20rpx;
				border-top: 1rpx solid #eeeeee;
			}
			.wx-btn {
				background-color: transparent;
				border: none !important;
				padding: 0;
				line-height: inherit;
				&::after {
					display: none !important; /* 禁用微信默认的::after边框 */
				}
			}
		}
	}

	.poster {
		position: absolute;
		left: 50%;
		bottom: 350rpx;
		transform: translateX(-50%);
		width: calc(100% - 66rpx * 2);
		border-radius: 20rpx;
	}
	.share-btns {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 320rpx;
		.grid {
			padding: 44rpx 50rpx 48rpx;
			background: #f6f6f6;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			justify-content: space-between;
			.item {
				background-color: transparent;
				border: none !important;
				padding: 0;
				line-height: inherit;
				&::after {
					display: none !important; /* 禁用微信默认的::after边框 */
				}
				.icon {
					width: 90rpx;
					height: 90rpx;
				}
				.name {
					white-space: nowrap;
					font-size: 24rpx;
					color: #010101;
					margin-top: 8rpx;
				}
			}
		}
		.cancel {
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			padding: 30rpx;
			background-color: #fff;
		}
	}
</style>
